<template>
	<view class="content">
		<view style="position: relative;">
			<image class="bg" :src="$store.state.images.doc_1" mode="widthFix"></image>
			<view class="wearers" :style="{justifyContent:wearers.length>2?'start':'center'}">
				<view class="add-user" @click="addWearer">
					<image class="ic-add-user" src="../../static/ic_add_user.png" mode="widthFix"></image>
					<text class="add-user-text">添加佩戴者</text>
				</view>
				<view class="add-user" @click="selectWearer(index)" v-for="(wear, index) in wearers" :key="index">
					<view class="wear-avatar">
						<!-- <text class="wear-avatar-text">
							{{ wear.WearerName.substr(0, 1) }}
						</text> -->
						<image class="wear-icon" :src="wear.Icon"></image>
						<text class="wear-relate">
							{{ wear.WeareaRelate }}
						</text>
					</view>
					<text class="add-user-text" :class="{'active':selectedWearerIndex==index}">{{ wear.WearerName }}</text>
				</view>
			</view>
		</view>
		<navBar class="nav-bar" title="视力档案"></navBar>
		
		<view class="add-doc-card" @click="addDoc">
			<image class="ic-add-doc" src="../../static/ic_add_doc.png" mode="widthFix"></image>
			<text>新增视力档案</text>
		</view>
		<view class="doc-detail-container">
			
			<swiper style="width: calc(100vw - 70rpx); height: 900rpx;"
				:current="current"
				@change="change">
				<swiper-item v-for="(item,index) in visionArchives" :key="index">
					<view class="doc-detail">
						<view class="title">
							<text>TA的视力档案</text>
						</view>
						<view class="doc-form">
							<view class="doc-form-row">
								<text class="label">验配时间</text>
								<text class="value">{{ item.FittingDate }}</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label"></text>
								<text class="label" style="width: 200rpx;">左眼(OS)</text>
								<text class="label" style="width: 200rpx;">右眼(OD)</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">绑定镜片</text>
								<image class="icon" src="../../static/ic_copy.png" mode="widthFix" @click="showBarCode('左眼验配条码',item.Lbarcode)"></image>
								<text class="label">绑定镜片</text>
								<image class="icon" src="../../static/ic_copy.png" mode="widthFix" @click="showBarCode('右眼验配条码',item.Rbarcode)"></image>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">镜片名称</text>
								<text class="value" >{{ item.LlensName }}</text>
								<text class="value" >{{ item.RLensName }}</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">镜片膜层</text>
								<text class="value" >{{ item.LlensLayer }}</text>
								<text class="value" >{{ item.RlensLayer }}</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">球镜</text>
								<text class="value" >{{item.Lsph}}D</text>
								<text class="value" >{{item.Rsph}}D</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">柱镜</text>
								<text class="value" >{{item.Lcyl}}D</text>
								<text class="value" >{{item.Rcyl}}D</text>
							</view>
							<!-- <view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">轴位</text>
								<text class="value" >{{ item.Lax }}</text>
								<text class="value" >{{ item.Rax }}</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">下加光</text>
								<text class="value" >{{ item.LAddLight }}</text>
								<text class="value" >{{ item.RAddLight }}</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">眼轴</text>
								<text class="value" >{{item.Laol}}mm</text>
								<text class="value" >{{item.Raol}}mm</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">瞳距</text>
								<text class="value" >{{item.Lpd}}mm</text>
								<text class="value" >{{item.Rpd}}mm</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">瞳高</text>
								<text class="value" >{{item.Lph}}mm</text>
								<text class="value" >{{item.Rph}}mm</text>
							</view> -->
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label">验配单</text>
								<image class="icon" src="../../static/ic_upload.png" mode="widthFix"></image>
								<text class="label" style="width: 200rpx; color: #9fdaff;" @click="showImage(item.FittingList)">查看验配单</text>
							</view>
							<view class="divider"></view>
							<view class="doc-form-row">
								<text class="label" >购买凭证</text>
								<image class="icon" src="../../static/ic_scan.png" mode="widthFix"></image>
								<text class="label" style="width: 200rpx; color: #9fdaff;" @click="showImage(item.BuyVoucher)">查看购买凭证</text>
							</view>
							<view class="divider"></view>
							<view class="bottom-btns">
								<view class="delete" @click="showDelete(item)">
									删除
								</view>
								<view class="edit" @click="showEdit(item)">
									编辑
								</view>
							</view>
							<!-- 9fdaff -->
							<view class="doc-form-row center">
								<view class="end-divider"></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="prev-item" v-if="visionArchives.length && current > 0" @click="current-=1">
				<image class="ic-prev" src="../../static/ic_prev.png" mode="widthFix"></image>
			</view>
			<view class="next-item" v-if="visionArchives.length && current < visionArchives.length - 1" @click="current+=1">
				<image class="ic-next" src="../../static/ic_next.png" mode="widthFix"></image>
			</view>
		</view>
		
		<uni-popup ref="popupAddWearer" type="center" :isMaskClick="false">
			<addWearer
				@onCancel="onCancelAddWearer"
				@onConfirm="onConfirmAddWearer"
			></addWearer>
		</uni-popup>
		<uni-popup ref="popupAddDoc" type="center" :isMaskClick="false">
			<addDoc
				@onCancel="onCancelAddDoc"
				@onConfirm="onConfirmAddDoc"
			></addDoc>
		</uni-popup>
	</view>
</template>

<script>
	import navBar from '../../widgets/nav_bar.vue'
	import addWearer from '../../widgets/add_wearer.vue';
	import addDoc from '../../widgets/add_doc.vue';
	import { mapState } from 'vuex';
	export default {
		components: {
			navBar,
			addWearer,
			addDoc,
		},
		data() {
			return {
				current: 0,
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			addWearer() {
				this.$refs.popupAddWearer.open();
			},
			selectWearer(index) {
				this.$store.commit('selectWearer', index);
			},
			onCancelAddWearer() {
				console.log("onCancelAddWearer")
				this.$refs.popupAddWearer.close();
			},
			onConfirmAddWearer(form) {
				console.log("onConfirmAddWearer", form)
				this.$refs.popupAddWearer.close();
				this.$store.dispatch("addEstablishWearerInfor", form);
			},
			addDoc() {
				if (this.selectedWearerIndex < 0) {
					uni.showToast({
						title: "请先选择佩戴者",
						icon: "none"
					})
					return;
				}
				this.$refs.popupAddDoc.open();
			},
			onCancelAddDoc() {
				console.log("onCancelAddDoc")
				this.$refs.popupAddDoc.close();
			},
			onConfirmAddDoc(form) {
				console.log("onConfirmAddDoc", form)
				this.$refs.popupAddDoc.close();
				// postEditVisionArchivesInfor
				this.$store.dispatch("postEditVisionArchivesInfor", form);
			},
			showBarCode(title, value) {
				uni.showModal({
					title: title,
					content: value,
				})
			},
			showImage(url) {
				uni.previewImage({
					urls: [url],
				})
			},
			showDelete(item) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "是否确定删除",
					cancelText: "取消",
					confirmText: "确定删除",
					confirmColor: 'red',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							_this.$store.dispatch('ReMoveVisionArchivesInfor', item.VhId);
							_this.current = 0;
						}
					}
				})
			},
			showEdit(item) {
				// this.editItem = {...item};
				this.$store.commit('setDocEditItem', {...item})
				this.addDoc();
			},
		},
		watch: {
			selectedWearerIndex(newVal) {
				if (newVal >= 0) {
					this.current = 0
					this.$store.dispatch("ReadVisionArchivesInfor");
				}
			},
		},
		computed: mapState(["wearers", "selectedWearerIndex", "visionArchives"]),
		onLoad() {
			this.$store.dispatch("getReadWearerInfor");
			this.$store.dispatch("getAllShop");
			this.$store.dispatch("ReadVisionArchivesInfor");
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
		font-family: "yshst" !important;
		overflow-y: scroll;
	}
	.nav-bar {
		position: absolute;
		top: 0;
		left: 0;
	}
	.bg {
		width: 100vw;
	}
	.wearers {
		position: absolute;
		bottom: 0;
		left: 10rpx;
		right: 10rpx;
		margin: 0 auto 140rpx auto;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		justify-content: center;
	}
	.add-user {
		width: 200rpx;
		min-width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.ic-add-user {
		width: 110rpx;
		height: 110rpx;
	}
	.wear-avatar {
		width: 110rpx;
		height: 110rpx;
		background-color: #9fdaff;
		border-radius: 55rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.wear-icon {
        width: 110rpx;
		height: 110rpx;
    }
	.wear-avatar-text {
		font-size: 50rpx;
		font-weight: bold;
		color: white;
	}
	.wear-relate {
		padding: 5rpx 10rpx;
		background-color: rgb(16, 18, 17);
		color: white;
		position: absolute;
		bottom: -10rpx;
		font-size: 20rpx;
		border-radius: 100rpx;
		left: auto;
		right: auto;
	}
	.add-user-text {
		margin-top: 10rpx;
	}
	.add-user-text.active {
		font-weight: bold;
		font-size: 40rpx;
	}
	.add-doc-card {
		background-color: white;
		border-radius: 30rpx;
		height: 300rpx;
		min-height: 300rpx;
		width: calc(100vw - 70rpx);
		align-self: center;
		margin-top: -70rpx;
		position: relative;	
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.ic-add-doc {
		width: 100rpx;
		margin-bottom: 15rpx;
	}
	.doc-detail-container {
		margin-top: 15rpx;
		position: relative;
		align-self: center;
	}
	.doc-detail {
		background-color: white;
		border-radius: 30rpx;
		width: calc(100vw - 70rpx);
		/* overflow: hidden; */
		position: relative;
	}
	.doc-detail .title {
		height: 90rpx;
		background-color: #9fdaff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 45rpx;
		/* border-radius: 30rpx; */
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}
	.doc-form {
		display: flex;
		flex-direction: column;
		padding: 0 25rpx;
	}
	.doc-form-row {
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 15rpx;
	}
	.doc-form-row .label {
		width: 140rpx;
		display: inline-block;
	}
	.doc-form-row .value {
		color: #999999;
		width: 230rpx;
	}
	.doc-form-row .icon {
		width: 35rpx;
		padding: 10rpx;
		margin-right: 35rpx;
	}
	.divider {
		background-color: #e5f2f9;
		height: 1rpx;
	}
	.end-divider {
		width: 40rpx;
		height: 4rpx;
		background-color: #9fdaff;
		border-radius: 2rpx;
	}
	.doc-form-row.center {
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;	
	}
	.prev-item {
		width: 100rpx;
		/* background-color: red; */
		position: absolute;
		height: 100rpx;
		left: -30rpx;
		top: 0;
		bottom: 0;
		margin: auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.next-item {
		width: 100rpx;
		/* background-color: red; */
		position: absolute;
		height: 100rpx;
		right: -30rpx;
		top: 0;
		bottom: 0;
		margin: auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ic-prev, .ic-next {
		width: 30rpx;
	}
	.bottom-btns {
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bottom-btns .edit {
		color: black;
		padding: 10rpx 15rpx;
	}
	.bottom-btns .delete {
		color: red;
		padding: 10rpx 15rpx;
	}
</style>